<template>
  <el-form
    :model="modelForm"
    ref="modelForm"
    :loading="true"
    :disabled="!isEdit"
    :rules="isEdit ? formRule : {}"
    label-width="80px"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="讲师名称"
          prop="name"
        >
          <el-input
            v-model="modelForm.name"
            style="width: 80%"
            maxlength="15"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="讲师排序"
          style="width: 40%"
          prop="sort"
        >
          <el-input-number
            v-model="modelForm.sort"
            :min="0"
            :max="999"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="讲师头衔"
          prop="level"
        >
          <el-select
            v-model="modelForm.level"
            style="width: 80%"
            clearable
            placeholder="请选择"
          >
            <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
            <el-option
              :value="1"
              label="高级讲师"
            />
            <el-option
              :value="2"
              label="首席讲师"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="讲师资历"
          prop="career"
        >
          <el-input
            v-model="modelForm.career"
            style="width: 80%"
            maxlength="15"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item
      label="讲师简介"
      prop="intro"
    >
      <el-input
        v-model="modelForm.intro"
        style="width: 91%"
        :rows="10"
        type="textarea"
        maxlength="250"
      />
    </el-form-item>

    <el-form-item
      label="用户头像"
      prop="avatar"
    >
      <!-- 讲师头像：TODO -->
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8120/admin/oss/file/upload?module=avatar"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :on-error="handleAcatarError"
        :before-upload="beforeAvatarUpload"
      >
        <img
          v-if="modelForm.avatar"
          :src="modelForm.avatar"
          class="avatar"
        >
        <i
          v-else
          class="el-icon-plus avatar-uploader-icon"
        ></i>
      </el-upload>
    </el-form-item>

  </el-form>
</template>
<script>
import { OneTableModelMixins } from '@/mixins/OneTableModelMixins'

export default {
  name: 'teacherModel',
  mixins: [OneTableModelMixins],
  data() {
    return {
      defaultModelForm: {
        level: 1
      },
      formRule: {
        name: [{ required: true, message: '请填写教师名称', trigger: 'blur' },],
        career: [{ required: true, message: '请填写教师资历', trigger: 'blur' },],
        avatar: [{ required: true, message: '请上传讲师头像', trigger: 'blur' },],
      },
      teacher: {},
    }
  },
  methods: {
    initFormData(operator) {
      if (operator === '0') {
        this.$set(this.modelForm, 'joinDate', new Date())
        this.$set(this.modelForm, 'sort', 0)
        console.log(this.modelForm.joinDate)
      }
    },
    // 文件上传成功
    handleAvatarSuccess(response) {
      if (response.success) {
        this.modelForm.avatar = response.data.url
        // 强制重新渲染
        this.$forceUpdate()
      } else {
        this.$message.error('上传头像失败')
      }
    },
    // 文件上传失败（http）
    handleAcatarError(err) {
      this.$message.error('上传头像失败（http错误）')
    },
    // 文件上传前的校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>
<style scoped>
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader img {
  width: 178px;
  height: 178px;
  display: block;
}
</style>